<template>
	<view class="box">
		<scroll-view style="width: 100%;height: 92.4vh;" @scrolltolower="scrolltolower" scroll-y="true">
			<view class="search">
				<input type="text" placeholder="搜索" maxlength="21" v-model="orderId"/>
				<u-icon name="search" class="icon" size="34" @click="searchClick"></u-icon>
			</view>
			<view class="select">
				<view class="select-top">
					<view class="tabs">
						<view class="tab" v-for="(item,index) in productTest" :key="item.categoryId" @click="selectTab(item.categoryId)">
							<text class="tab-text" :class="{word:currentIndex === item.categoryId}">{{ item.categoryName }}</text>
							<view class="tab-marker" :class="{ 'active': currentIndex === item.categoryId }"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="select tabclass" style="background-color: #F0EFF4;">
				<view class="select-top">
					<view class="tabs">
						<view class="tab" v-for="(item, index) in tabsData" :key="index" @click="selectTabClass(index)">
							<text class="tab-text" :class="{wordData:currentIndex1 === index}">{{ item.title }}</text>
							<view class="tab-text-class" :class="{ 'activeClass': currentIndex1 === index }"
								style="width: 35rpx;"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="item" v-for="item in extractPoints" :key="item.orderId" @click="listDetail(item.orderId)">
					<view class="title">
						<text>{{item.orderId}}</text>
						<view @click.stop="copeLine(item.orderId)"><u-icon name="file-text" size="42" class="icon" ></u-icon></view>
						<view style="display: flex;align-items: center;" @click.stop="naviCumsor">
							<image src="../../static/service.jpg" mode=""></image>
							<span>在线客服</span>
						</view>
					</view>
					<view class="detail">
						<view class="left">次月返</view>
						<view class="center">
							<span>办卡人 :</span>
							<text>{{item.name}}</text>
							<!-- <u-icon name="file-text" size="28" class="icon"></u-icon> -->
						</view>
						<view class="right" v-if="item.orderStatus!=null">
							<span>状态 :</span>
							<view class="state">{{orderStatusApi(item.orderStatus)}}</view>
						</view>
					</view>
					<view class="goods">
						<image :src="item.goodsMainImg" mode=""></image>
						<view class="goods-left">
							<view class="info">{{item.goodsName.length<20?item.goodsName:item.goodsName.slice(0,19)+'...'}}</view>
							<view class="promoter">
								<span>推广人 : {{item.username}}</span>
								<!-- <u-icon name="file-text" size="28" class="icon"></u-icon> -->
							</view>
							<view class="contact">
								<span>联系人 : {{item.phone}}</span>
								<!-- <u-icon name="file-text" size="28" class="icon"></u-icon> -->
							</view>
							<view class="line"></view>
						</view>
					</view>
					<view class="swidth">
						<view class="time">
							<span>下单时间:</span>
							<text>{{item.createTime}}</text>
						</view>
						<view class="phone" v-if="item.orderStatus!=='0'">
							<text class="span">生产号码:</text>
							<view class="text">
								<span>{{123 }}</span>
								<u-icon name="file-text" size="28" class="icon" v-if="item.productionNumber!==null"></u-icon>
							</view>
							<text class="money" style="margin-left: 158rpx;">首充0元</text>
						</view>
						<view class="jing" v-if="item.orderStatus!=='0'">
							<span class="span">{{item.trackingCompany===null?'':item.trackingCompany}}</span>
							<span class="data">{{item.trackingNumber===null?'':item.trackingNumber}}</span>
							<text>查询快递</text>
						</view>
						<view class="time" v-if="item.orderStatus==='0'">
							<span>失败原因:</span>
							<text>{{item.noPassCause===null?'暂无':item.noPassCause}}</text>
						</view>
					</view>
				</view>
				
			</view>
			<view class="grace-loading" v-if="isLoadAll">{{ bottomText }}</view>
		</scroll-view>	
		
		<u-select v-model="show" mode="single-column" :list="orderGoodsData" @confirm="confirm" title='热门商品'></u-select>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import { orderList } from "@/apis/order.js"
	export default {
		data() {
			return {
				// tabs: [{
				// 		title: '全部',
				// 		id:''
				// 	},
				// 	{
				// 		title: '电话卡',
				// 		id:'1'
				// 	},
				// 	{
				// 		title: '流量卡',
				// 		id:'2'
				// 	},
				// 	{
				// 		title: '宽带',
				// 		id:'3'
				// 	},
				// 	{
				// 		title: '靓号',
				// 		id:'4'
				// 	},
				// 	{
				// 		title: '充值',
				// 		id:'5'
				// 	}
				// ],
				tabsData: [{
						title: '直营',
						id:1
					},
					{
						title: '代理',
						id:2
					},
					{
						title: '商品',
						id:3
					}
				],
				currentIndex: 0,
				currentIndex1: 0,
				show: false,
				list: [{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],
				sceneData: '',
				sceneDataId: '',
				currentPage: 1, // 当前页码
				pageSize: 10, // 每页显示的数量
				total: 0, // 总页数
				loadingTxt: '加载中...',
				extractPoints: [],
				orderId:'',
				isLoadAll: true,
				//定义的tab1参数给后端传的
				selectTabData:1
			}
		},
		computed: {
			...mapState(['productTest','orderGoodsData']),
			bottomText() {
				if (this.extractPoints.length < this.total && this.extractPoints.length !== 0) {
					return "加载中..."
				} else {
					return "---没有更多数据---";
				}
			}
		},
		onLoad() {
			this.currentIndex = this.productTest[0].categoryId;
			orderList({
				size:this.pageSize,
				current:this.currentPage,
				orderId:this.orderId,
				orderType:this.currentIndex1,
				categoryId:this.currentIndex
			})
			.then((res)=>{
				this.extractPoints = res.data.records;
			})
			// this.deviceAbnormalData();
			this.orderGoodsAction();
		},
		onShow() {
			// 当前页面赋值为1,次两步骤在onshow是使用,很重要但此处不用
			// this.currentPage = 1;
			// this.total = 0;
			// this.extractPoints = [];
		},
		methods: {
			naviCumsor(){
				uni.navigateTo({
					url:"/pages/chat/chat"
				})
			},
			//复制链接
			copeLine(val) {
				const textToCopy = val;
				let that = this;
				uni.setClipboardData({
					data: textToCopy,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						});
						that.linkModel = false;
						console.log('asdad999', that.linkModel)
					},
					fail: function(err) {
						that.linkModel = false;
						console.log('复制失败', err);
					}
				});
			},
			...mapActions(['orderGoodsAction']),
			deviceAbnormalData() {
				//当list的长度刚好和total（总条数）一样，且list长度不为0的时候，说明，数据已经获取完毕，
				if (this.extractPoints.length == this.total && this.extractPoints.length != 0) {
					return;
				};
				this.currentPage = this.currentPage + 1;
				return orderList({
					size:this.pageSize,
					current:this.currentPage,
					orderId:this.orderId,
					orderType:this.currentIndex1,
					categoryId:this.currentIndex
				})
					.then(res => {
						const {
							total,
							records
						} = res.data;
						if (this.extractPoints) {
							this.extractPoints = [...this.extractPoints, ...records];
						} else {
							this.extractPoints = [...records];
						}
						this.total = total;
					})
			},
			//跳转订单详情
			listDetail(val){
				uni.navigateTo({
					url:`/pages/myOrder/myOrder?id=${val}`
				})
			},
			scrolltolower() {
				this.deviceAbnormalData();
			},
			searchClick(){
				//搜索
				this.currentPage = 1;
				this.total = 0
				orderList({
					size:this.pageSize,
					current:this.currentPage,
					orderId:this.orderId,
					orderType:this.currentIndex1,
					categoryId:this.currentIndex
				})
				.then((res)=>{
					this.extractPoints = res.data.records;
				})
			},
			orderStatusApi(val){
				switch (val){
					case '0':
						return "开卡失败";
					case '1':
						return "开卡中";	
					case '2':
						return "发货中";	
					case '3':
						return "已激活";	
					case '4':
						return "终止";	
					case '5':
						return "已首充";				
					default:
						break;
				}
			},
			confirm(e) {
				this.sceneData = e[0].label
				this.sceneDataId = e[0].value;
				// this.orderId = this.sceneData;
				this.currentPage = 1;
				orderList({
					size:100,
					current:this.currentPage,
					// orderId:this.orderId,
					// orderType:this.currentIndex1,
					// categoryId:this.currentIndex,
					goodsId:this.sceneDataId
				})
				.then((res)=>{
					this.extractPoints = res.data.records;
				})
			},
			selectTab(index) {
				this.currentPage = 1;
				this.total = 0;
				this.currentIndex = index;
				// 这里可以添加切换tab时触发的其他逻辑，比如页面滚动、数据加载等
				orderList({
					size:this.pageSize,
					current:this.currentPage,
					orderId:this.orderId,
					orderType:this.currentIndex1,
					categoryId:this.currentIndex
				})
				.then((res)=>{
					this.extractPoints = res.data.records;
				})
			},
			selectTabClass(index) {
				if (index === 2) {
					this.show = true;
					for(let val of this.orderGoodsData){
						val.value = val.goodsId;
						val.label = val.goodsName;
					}
					console.log('888777666',this.orderGoodsData)
					return;
				}
				this.currentPage = 1;
				this.total = 0
				this.currentIndex1 = index;
				orderList({
					size:this.pageSize,
					current:this.currentPage,
					orderId:this.orderId,
					orderType:this.currentIndex1,
					categoryId:this.currentIndex
				})
				.then((res)=>{
					this.extractPoints = res.data.records;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 750rpx;
		min-height: 94vh;
		background-color: #F0EFF4;
		padding: 70rpx 20px 20px 20px;
		box-sizing: border-box;

		.search {
			width: 100%;
			height: 60rpx;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			background-color: white;
			margin-bottom: 20rpx;

			input {
				margin: 0 20rpx 0 40rpx;
				width: 600rpx;
			}
		}
	}

	.tabclass {
		margin-bottom: 30rpx;
	}

	.select {
		height: 80rpx;
		width: 710rpx;
		// margin: 8rpx 20rpx 10rpx 20rpx;
		background-color: white;
		border-radius: 15rpx;
		display: flex;
		flex-direction: column;
		margin-bottom: 10rpx;

		.select-top {
			height: 100%;
			width: 100%;

			.tabs {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100%;
				width: 100%;
			}

			.tab {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 100%;
				width: 50%;
				overflow: hidden;
			}

			.tab-text {
				/* 文字样式 */
				color: gray;
			}

			.word {
				color: black;
			}
			.wordData{
				color: #2D9FFD;
				font-weight: 1000;
			}

			.tab-marker {
				width: 0;
				height: 2px;
				background-color: #2D9FFD;
				/* 标记颜色 */
				transition: width 0.4s ease;
				/* 动画效果 */
				margin-top: 10rpx;
			}

			.tab-marker.active {
				width: 30%;
			}

			.tab-text-class {
				width: 0;
				height: 2px;
				// background-color: #2D9FFD;
				/* 标记颜色 */
				transition: width 0.4s ease;
				/* 动画效果 */
				margin-top: 10rpx;
			}

			.activeClass {
				width: 30%;
				height: 2px;
				background-color: #2D9FFD;
				/* 标记颜色 */
				transition: width 0.4s ease;
				/* 动画效果 */
				margin-top: 10rpx;
			}
		}
	}
	.content{
		width: 100%;
		.item{
			width: 100%;
			max-height: 550rpx;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			background-color: white;
			margin-bottom: 25rpx;
			.title{
				width: 100%;
				height: 80rpx;
				border-bottom: 1rpx solid #D9D9D9;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 30rpx;
				font-weight: 1000;
				margin-bottom: 10rpx;
				image{
					width: 50rpx;
					height: 50rpx;
					margin-right: 10rpx;
				}
				.icon{
					margin: 0 10rpx 0 0rpx;
				}
				span{
					color: #5490D1;
				}
			}
			.detail{
				height: 60rpx;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;
				.left{
					height: 40rpx;
					width: 150rpx;
					border: 1rpx solid #5490D1;
					font-size: 26rpx;
					margin-right: 25rpx;
					text-align: center;
					line-height: 40rpx;
					border-radius: 16rpx;
					color: #5490D1;
				}
				.center{
					flex-grow: 1;
					display: flex;
					align-items: center;
					span{
						margin-right: 20rpx;
						color: #959595;
					}
					.icon{
						margin-top: 5rpx;
						margin-right: 5rpx;
						margin-left: 5rpx;
					}
				}
				.right{
					height: 40rpx;
					width: 240rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.state{
						width: 150rpx;
						color: #5DBE37;
						border: 1rpx solid #5DBE37;
						font-size: 20rpx;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						border-radius: 16rpx;
					}
				}
			}
			.goods{
				height: 160rpx;
				width: 100%;
				display: flex;
				justify-content: space-between;
				margin-bottom: 30rpx;
				// align-items: center;
				image{
					width: 150rpx;
					height: 152rpx;
				}
				.goods-left{
					flex-grow: 1;
					height: 100%;
					margin-left: 30rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.line{
						width: 100%;
						// height: 1rpx;
						border-top: 0.1rpx solid #D9D9D9;
					}
					.info{
						margin-bottom: 10rpx;
					}
					.promoter ,.contact{
						width: 100%;
						font-size: 25rpx;
						span{
							color:  #989898;
							margin-right: 5rpx;
						}
					}
				}
			}
			.swidth{
				max-height: 140rpx;
				display: flex;
				flex-direction: column;
				// justify-content: space-between;
				view{
					margin-bottom: 10rpx;
				}
				.time{
					font-size: 25rpx;
					span{
						font-weight: 1000;
						margin-right: 90rpx;
					}
					text{
						color: #939393;
					}
				}
				.phone{
					display: flex;
					align-items: center;
					font-size: 25rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					// color: #939393;
					.span{
						font-weight: 1000;
						// margin-right: 90rpx;
					}
					.text{
						// margin-right: 180rpx;
						text{
							color: #939393;
						}
						.icon{
							color: black;
						}
					}
					.money{
						color: #939393;
					}
				}
				.jing{
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 25rpx;
					.span{
						font-weight: 1000;
						margin-right: 90rpx;
					}
					text{
						color: red;
					}
					.data{
						margin-right: 274rpx;
					}
				}
			}
			
		}
	}
	.grace-loading {
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-weight: bold;
		margin-bottom: 30rpx;
		margin-top: 30rpx;
	}
</style>